<template>
  <el-table :data="tableData" row-key="cat_id">
    <template v-for="(col, colI) in columns">
      <!-- 自定义数据 -->
      <el-table-column
        :key="colI"
        v-if="col.type"
        :label="col.title"
        :fixed="col.fixed"
        :width="col.width"
      >
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <!-- switch -->
          <el-switch
            v-if="col.type === 'switch'"
            v-model="scope.row[col.field]"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="col.payload.open"
            :inactive-value="col.payload.close"
            @change="col.payload.change(scope.row)"
          >
          </el-switch>
          <!-- switch -->

          <!-- img -->
          <img :src="scope.row[col.field]" v-if="col.type === 'img'" />
          <!-- img -->

          <!-- title -->
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row[col.field]"
            placement="top"
            v-if="col.type === 'title'"
          >
            <span>
              {{ scope.row[col.field] | substrFilter }}
            </span>
          </el-tooltip>

          <!-- title -->

          <!-- btn -->
          <template v-if="col.type === 'btn'">
            <el-button
              v-for="(btn, btnI) in col.payload"
              :key="btnI"
              :type="btn.type"
              size="mini"
              :icon="btn.icon"
              @click="btn.click(scope.row)"
            >
              {{ btn.name }}
            </el-button>
          </template>
          <!-- btn -->
        </template>
      </el-table-column>
      <!-- 自定义数据 -->

      <!-- 默认数据   :prop="col.field" -->
      <el-table-column
        :key="colI"
        v-else
        :label="col.title"
        :fixed="col.fixed"
        :width="col.width"
      >
        <template slot-scope="scope">
          {{ col.render ? col.render(scope.row) : scope.row[col.field] }}
        </template>
      </el-table-column>
      <!-- 默认数据 -->
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
};
</script>
